// 点击出现popup弹窗的事件
// pop弹窗的数据
export let eventTitle = ref()
export let eventContent = ref()
export function popupShow(map) {
  map.on('click', Popupclick)

  map.on('pointermove', function (e) {
    var pixel = map.getEventPixel(e.originalEvent)
    var hit = map.hasFeatureAtPixel(pixel)
    map.getTargetElement().style.cursor = hit ? 'pointer' : ''
  })

  function Popupclick(evt) {
    //判断当前单击处是否有要素，捕获到要素时弹出popup
    var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
      return feature
    })

    if (feature) {
      let event = feature.values_.values_
      if (event) {
        eventTitle.value = Object.keys(event)
        eventContent.value = Object.values(event)
      }
      var position = feature.getGeometry().flatCoordinates
      let app = document.querySelector('#app')
      app.addEventListener('click', handleMap)
      setTimeout(() => {
        app.removeEventListener('click', handleMap)
      }, 100)
    }
  }

  function handleMap(evt) {
    var { pageX, pageY } = evt
    let popup = document.querySelector('#popup')
    popup.setAttribute('style', 'display:block !important;z-index:0;')
    popup.style.left = pageX - 150 + 'px'
    popup.style.top = pageY - 155 + 'px'
  }

  return Popupclick
}
